<template>
  <div>
    <img class="loading" v-show="loading" src="../../assets/img/5.gif" alt>
    <city-nav></city-nav>
    <city-search :cities="cities"></city-search>
    <city-list :cities="cities" :hotCities="hotCities"></city-list>
    <city-word :cities="cities"></city-word>
  </div>
</template>
<script>
import CityNav from "./components/nav";
import CitySearch from "./components/search";
import CityList from "./components/cityList";
import CityWord from "./components/word";

import { CityModel } from "../../models/CityModel";
const cityModel = new CityModel();

export default {
  name: "city",
  components: {
    CityNav,
    CitySearch,
    CityList,
    CityWord
  },
  data() {
    return {
      cities: [],
      hotCities: [],
      loading: ""
    };
  },
  beforeMount() {
    this.loading = true;
  },
  mounted() {
    cityModel.getCity().then(res => {
      this.handleData(res);
    });
  },
  methods: {
    handleData(res) {
      var { cities, hotCities } = res.data.data;
      this.cities = cities;
      this.hotCities = hotCities;
      this.loading = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.loading{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
</style>
